<template>
	<view class="template-mine tn-safe-area-inset-bottom">
		<tn-nav-bar fixed :bottomShadow="false">{{body.nickname}}</tn-nav-bar>
		<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
			<swiper class="card-swiper " :circular="true" :autoplay="true" duration="500" interval="5000"
				@change="cardSwiper">
				<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
					<view class="swiper-item image-banner" @click="kantu(index,swiperList)">
						<image :src="item" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
			<view style="width: 150px;height: 150px; 
				   justify-content: space-between;
    padding: 0 15px;
    display: flex;
    position: fixed;
    z-index: 120;
    top:150rpx;
	left: 10px;" v-if="body.chongwu">
				<image v-model="showchongwu" :src="body.chongwu" style="height: 100px;" mode="heightFix"></image>
			</view>
		</view>
		<view class="indication">
			<block v-for="(item,index) in swiperList" :key="index">
				<view class="spot" :class="cardCur==index?'active':''"></view>
			</block>
		</view>

		<view class="about-shadow  tn-bg-white tn-margin-sm" style="padding:26rpx 0;">
			<view class=" tantan-slide-box-info ">

				<view class="tn-flex tn-flex-row-between">
					<view class="title justify-content-item">{{body.nickname}}
						<text class="tn-icon-trophy-fill"
							style="color:rgb(85 170 0 /0.6);font-size:40rpx;margin:0 18rpx;"></text>
						<tn-tag v-if="body.is_renzheng" shape="circle" backgroundColor="tn-cool-bg-color-4"
							height="38rpx" width="120rpx">
							<text class="tn-icon-safe" style="font-size:24rpx;">实名认证</text>
						</tn-tag>
					</view>
				</view>

				<view class="desc tn-flex tn-flex-row-between">
					<view class="justify-content-item">
						<view class="zhuangtai" v-if="body.zhuangtai_image">
							<image :src="calcImageSrc(body.zhuangtai_image)"
								style="width:60rpx;height:60rpx;margin-left: -40rpx;" mode="aspectFill">
							</image>
							<text class="tn-margin-left-sm">{{body.zhuangtai_title}}</text><text
								class="tn-icon-right"></text>
						</view>
						<tn-tag v-if="!body.juli=='未知'" shape="circle" backgroundColor="#f0f0f0" fontColor="#8d8d8d" height="38rpx"
							width="180rpx">
							<text class="tn-icon-location-fill"></text> 距你{{body.juli}}km
						</tn-tag>
					</view>
					<view class="justify-content-item" style="margin-top: 4px;">
						<tn-button @click="guanzhu(body.id)" shape="round"
							backgroundColor="tn-main-gradient-purple--light" size="sm" v-if="body.is_flow">
							<text class="tn-icon-reduce-circle tn-margin-right-sm" style="font-size:32rpx;"></text>取消关注
						</tn-button>
						<tn-button @click="guanzhu(body.id)" shape="round"
							backgroundColor="tn-main-gradient-purple--reverse" size="sm" v-else>
							<text class="tn-icon-add-circle tn-margin-right-sm" style="font-size:32rpx;"></text>关注
						</tn-button>
					</view>
				</view>

				<view class="desc">
					<tn-tag v-if="body.online" shape="circle" backgroundColor="#ebebeb" fontColor="#3eaa6f"
						height="34rpx" width="80rpx">
						在线
					</tn-tag>
					<text v-if="body.new_city">现居{{body.new_city}}</text>
					<text v-else>现居:未填写</text>
					<text v-if="body.old_city"> • {{body.old_city}}人</text>
					<text v-else> • 籍贯:未填写</text>
				</view>

				<view class="tags">
					<text v-if="body.shengri.age">
						{{body.shengri.age}}，{{body.shengri.animals}}，{{body.shengri.constellation}}
					</text>
					<text v-else>年龄未填写</text>
					<text v-if="body.tizhong">
						，{{body.tizhong}}Kg
					</text>
					<text v-if="body.shengao">
						，{{body.shengao}}cm
					</text>
					<text v-if="body.zhiye">
						，{{body.zhiye}}
					</text>
				</view>
				<view class="tags">
					<text v-if="body.car">{{body.car}} • </text>
					<text v-if="body.home">{{body.home}}  •</text>
					<text v-if="body.xueli">{{body.xueli}} </text>
					<text v-if="body.xuexiao"> • {{body.xuexiao}} </text>

					<tn-tag v-if="body.is_school" shape="circle" backgroundColor="tn-main-gradient-cyan--light"
						height="38rpx" width="120rpx" margin="0 5px">
						<text style="font-size:24rpx;">已认证</text>
					</tn-tag>
				</view>
				<view class="tags">{{body.zhiwei}}
					<tn-tag v-if="body.is_work" shape="circle" backgroundColor="tn-main-gradient-cyan--light"
						height="38rpx" width="120rpx" margin="0 5px">
						<text style="font-size:24rpx;">已认证</text>
					</tn-tag>
				</view>

			</view>
		</view>


		<view class="about-shadow  tn-bg-white tn-margin-sm" style="padding:26rpx 32rpx;"
			v-if="configInfo.is_renzheng||configInfo.is_xueli||configInfo.is_work">
			<view class="tn-flex tn-flex-row-between">
				<view class="justify-content-item tn-text-lg">身份认证</view>
				<view class=" ">
					<!-- 	<tn-tag shape="circle" backgroundColor="#f4f4f4" fontColor="#60c100" height="36rpx" width="300rpx">
						<text class="tn-icon-safe-fill" style="font-size:34rpx;">认证</text>
					</tn-tag> -->
				</view>
			</view>

			<view class="tn-flex tn-flex-row-center tn-radius  tn-bg-white" v-if="configInfo.is_renzheng">
				<view class="tn-padding-sm tn-margin-sm  tn-radius">
					<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
						<view style="width:100rpx;
			height: 100rpx;
			font-size: 30px;
			border-radius: 50%;
			margin-bottom: 9px;
			position: relative;
			background-color: #f3f8ff;
			z-index: 1;" class=" tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur">
							<view class="tn-icon-identity-fill" style="color:rgb(116, 202, 255);font-size:60rpx;">
							</view>
						</view>
						<text class="tn-icon-success-circle-fill" style="font-size: 36rpx;"
							:class="body.sfz_name?'tn-color-red':''"></text>
						<view class="tn-text-center tn-margin-top-sm">
							<text class="tn-text-ellipsis" v-if="body.sfz_name">实名已认证</text>
							<text class="tn-text-ellipsis" v-else>实名未认证</text>
						</view>
					</view>
				</view>
				<view class="tn-padding-sm tn-margin-sm  tn-radius" v-if="configInfo.is_work">
					<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
						<view style="width:100rpx;
    height: 100rpx;
    font-size: 30px;
    border-radius: 50%;
    margin-bottom: 9px;
    position: relative;
	background-color: #fff7e9;
    z-index: 1;" class=" tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur">
							<view class="tn-icon-shop-fill" style="color:rgb(255, 153, 28);font-size:60rpx;"></view>
						</view>
						<text class="tn-icon-success-circle-fill" style="font-size: 36rpx;"
							:class="body.is_work?'tn-color-red':''"></text>
						<view class="tn-text-center tn-margin-top-sm">
							<text class="tn-text-ellipsis" v-if="body.is_work">工作已认证</text>
							<text class="tn-text-ellipsis" v-else>工作未认证</text>
						</view>
					</view>
				</view>
				<view class="tn-padding-sm tn-margin-sm  tn-radius " v-if="configInfo.is_xueli">
					<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
						<view style="width:100rpx;
			height: 100rpx;
			font-size: 30px;
			border-radius: 50%;
			margin-bottom: 9px;
			position: relative;
			background-color: #eefff1;
			z-index: 1;" class=" tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur">
							<view class="tn-icon-ticket-fill" style="color:rgb(150, 199, 97);font-size:60rpx;"></view>

						</view>
						<text class="tn-icon-success-circle-fill" :class="body.is_school?'tn-color-red':''"
							style="font-size: 36rpx;"></text>
						<view class="tn-text-center tn-margin-top-sm">
							<text class="tn-text-ellipsis" v-if="body.is_school">学历已认证</text>
							<text class="tn-text-ellipsis" v-else>学历未认证</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="about-shadow  tn-bg-white tn-margin-sm" style="padding:26rpx 32rpx;" v-if="body.tags[0]">
			<view class="tn-flex tn-flex-row-between">
				<view class="justify-content-item tn-text-lg">
					我的标签
				</view>
			</view>

			<view class="tn-flex tn-flex-wrap tn-radius tn-margin-top ">
				<tn-tag size='lg' backgroundColor="tn-main-gradient-purple--light" margin="15rpx 15rpx"
					v-for="(item, index) in body.tags" :key="index" class="tag-view">{{item}}</tn-tag>
			</view>
		</view>


		<view class="about-shadow  tn-bg-white tn-margin-sm" style="padding:26rpx 32rpx;">
			<view class="tn-flex tn-flex-row-between"
				@click="navigateToFn({ url: '/mineMixinPages/my_star?id='+id, checkLogin: false })">
				<view class="justify-content-item tn-text-lg">
					个人动态<text class="tn-text-sm tn-color-gray tn-margin-left-sm"></text>
				</view>
				<view class="tn-icon-right tn-color-gray">
				</view>
			</view>
			<quan-list :list="content" :index="true" ></quan-list>
			<!-- <view class=" tn-flex" >
				<view class="tn-flex-1" style="margin:20rpx 15rpx;" v-if="indexds<4"
					v-for="(item, indexds) in body.goodsimg" :key="indexds">
					<image :src="item" style="width:100%;height:180rpx;border-radius:10rpx;" mode="aspectFill"></image>
				</view>
			</view> -->

			<view class="tn-flex tn-flex-row-center tn-radius tn-margin-top tn-bg-white">
				<tn-button @click="navigateToFn({ url: '/mineMixinPages/my_star?id='+id, checkLogin: false })" shape="round"
					backgroundColor="tn-cool-bg-color-6" fontColor="#ffffff" padding="30rpx 30rpx" width="200rpx" shadow
					fontBold>
					<text class="">更多动态</text>
				</tn-button>
			</view>
		</view>


		<view class="about-shadow  tn-bg-white tn-margin-sm" style="padding:26rpx 32rpx;">
			<view class="tn-flex tn-flex-row-between">
				<view class="justify-content-item tn-text-lg">
					关于我
				</view>
			</view>
			<block v-if="body.dec&&body.home_ziwo">
				<view class="tn-flex tn-flex-row-between tn-margin-top">
					<view class="justify-content-item ">
						<tn-tag shape="circle" backgroundColor="#f4f4f4" fontColor="tn-color-bluepurple" height="40rpx"
							width="150rpx">
							<text class="tn-margin-right-sm tn-icon-circle-fill ">自我描述</text>
						</tn-tag>
					</view>
				</view>
				<view class="tn-margin-top tn-color-gray">
					{{body.dec}}
				</view>
			</block>
			<block v-if="body.voc&&body.home_voc">
				<view class="tn-margin-top" v-if="body.voc">
					<tn-tag shape="circle" backgroundColor="#f4f4f4" fontColor="tn-color-bluepurple" height="40rpx"
						width="150rpx">
						<text class="tn-margin-right-sm tn-icon-circle-fill">语音介绍</text>
					</tn-tag>
					<view class="tn-margin-top">
						<tn-button backgroundColor="#00FFC6" padding="40rpx 0" width="60%" shadow fontBold
							@click="bofang(body.voc)">
							<view class="voice-line-wrap"
								style="--line-height:15px;--line-start-color:royalblue ;--line-end-color:indianred">
								<block v-if="isplay">
									<view class="voice-line one"></view>
									<view class="voice-line two"></view>
									<view class="voice-line three"></view>
									<view class="voice-line four"></view>
									<view class="voice-line five"></view>
									<view class="voice-line six"></view>
									<view class="voice-line seven"></view>
									<view class="voice-line six"></view>
									<view class="voice-line five"></view>
									<view class="voice-line four"></view>
									<view class="voice-line three"></view>
									<view class="voice-line two"></view>
									<view class="voice-line one"></view>
								</block>
								<block v-else>
									<view class="tn-icon-sound"></view>
								</block>
								<text class="tn-color-black" style="margin-left: 15px;">{{body.vocsen}} ''</text>
							</view>
						</tn-button>
					</view>
				</view>
			</block>





			<block v-if="body.info_jiating&&body.home_jiating">
				<view class="tn-flex tn-flex-row-between tn-margin-top">
					<view class="justify-content-item ">
						<tn-tag shape="circle" backgroundColor="#f4f4f4" fontColor="tn-color-bluepurple" height="40rpx"
							width="150rpx">
							<text class="tn-margin-right-sm tn-icon-circle-fill ">家庭背景</text>
						</tn-tag>
					</view>

				</view>

				<view class="tn-margin-top tn-color-gray" v-if="body.info_jiating">
					{{body.info_jiating}}
				</view>
			</block>
			<block v-if="body.info_aihao&&body.home_aihao">
				<view class="tn-flex tn-flex-row-between tn-margin-top">
					<view class="justify-content-item ">
						<tn-tag shape="circle" backgroundColor="#f4f4f4" fontColor="tn-color-bluepurple" height="40rpx"
							width="150rpx">
							<text class="tn-margin-right-sm tn-icon-circle-fill ">兴趣爱好</text>
						</tn-tag>
					</view>

				</view>

				<view class="tn-margin-top tn-color-gray" v-if="body.info_aihao">
					{{body.info_aihao}}
				</view>
			</block>
			<block v-if="body.info_aiqingguan&&body.home_aiqing">

				<view class="tn-flex tn-flex-row-between tn-margin-top">
					<view class="justify-content-item ">
						<tn-tag shape="circle" backgroundColor="#f4f4f4" fontColor="tn-color-bluepurple" height="40rpx"
							width="150rpx">
							<text class="tn-margin-right-sm tn-icon-circle-fill ">爱情观</text>
						</tn-tag>
					</view>
				</view>

				<view class="tn-margin-top tn-color-gray" v-if="body.info_aiqingguan">
					{{body.info_aiqingguan}}
				</view>
			</block>
			<block v-if="body.info_lingyiban&&body.home_ta">

				<view class="tn-flex tn-flex-row-between tn-margin-top">
					<view class="justify-content-item ">
						<tn-tag shape="circle" backgroundColor="#f4f4f4" fontColor="tn-color-bluepurple" height="40rpx"
							width="150rpx">
							<text class="tn-margin-right-sm tn-icon-circle-fill ">理想的另一半</text>
						</tn-tag>
					</view>
				</view>

				<view class="tn-margin-top tn-color-gray" v-if="body.info_lingyiban">
					{{body.info_lingyiban}}
				</view>

			</block>
			<block v-if="body.info_whysolo&&body.home_dan">
				<view class="tn-flex tn-flex-row-between tn-margin-top">
					<view class="justify-content-item ">
						<tn-tag shape="circle" backgroundColor="#f4f4f4" fontColor="tn-color-bluepurple" height="40rpx"
							width="150rpx">
							<text class="tn-margin-right-sm tn-icon-circle-fill ">我为什么单身</text>
						</tn-tag>
					</view>
				</view>

				<view class="tn-margin-top tn-color-gray">
					{{body.info_whysolo}}
				</view>


			</block>
			<block v-if="body.info_shenghuo&&body.home_life">
				<view class="tn-flex tn-flex-row-between tn-margin-top">
					<view class="justify-content-item ">
						<tn-tag shape="circle" backgroundColor="#f4f4f4" fontColor="tn-color-bluepurple" height="40rpx"
							width="150rpx">
							<text class="tn-margin-right-sm tn-icon-circle-fill ">期待的生活状态</text>
						</tn-tag>
					</view>
				</view>

				<view class="tn-margin-top tn-color-gray">
					{{body.info_shenghuo}}
				</view>
			</block>
		</view>

		<view class="about-shadow  tn-bg-white tn-margin-sm" style="padding:26rpx 32rpx;"
			v-if="configInfo.shouhu_is==1">
			<view class="tn-flex tn-flex-row-between">
				<view class="justify-content-item tn-text-lg">
					守护({{body.keepCount}}人)
				</view>
				<view class="justify-content-item tn-margin-right-sm tn-text-lg tn-color-grey"
					@click="navigateToFn({ url: '/circleMixinPages/keep_user?num='+body.keepCount+'&id='+id, checkLogin: false })">
					<text class="tn-icon-right"></text>
				</view>
			</view>
			<view>

				<view class="tn-tag-content tn-margin-left-sm tn-margin-right-sm tn-padding-top-sm">
					<tn-scroll-list :indicator='false'>
						<view class="tn-flex ">

							<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius" @click="shuhouta()">
								<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">

									<tn-avatar class="" shape="circle" :src="shouhuimg" :border="true"
										borderColor="#aa00ff" icon="add" size="lg">
									</tn-avatar>
									<view class="tn-color-black tn-text-center tn-text-justify">
										<text class="tn-text-ellipsis tn-text-bold">守护TA</text>
									</view>
								</view>
							</view>

							<view class="tn-padding-sm tn-margin-xs tn-radius" v-if="body.keepCount==0">
								<view class="" style="padding: 28px 0  0 0;">
									<view class=" ">
										来做守护我的第一人吧！
									</view>
								</view>
							</view>

							<block v-for="(item, indexhot) in body.keeper" :key="indexhot" v-if="body.keepCount>0">
								<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius"
									@click="navigateToFn({ url: '/circleMixinPages/blogger_other?id='+item.fans_id, checkLogin: false })">
									<view
										class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">

										<tn-avatar :text_center="item.month" shape="circle" :src="item.avatar"
											size="lg">
										</tn-avatar>
										<view class="tn-color-black tn-text-center tn-text-justify">
											<text class="tn-text-ellipsis">{{item.nickname}}</text>
										</view>
									</view>
								</view>
							</block>

						</view>
					</tn-scroll-list>
				</view>
			</view>
		</view>
		<view class="about-shadow  tn-bg-white tn-margin-sm" style="padding:26rpx 32rpx;" v-if="configInfo.liwuopen==1">

			<view class="tn-flex tn-flex-row-between">
				<view class="justify-content-item tn-text-lg">
					收到的礼物({{body.giftCount}})
				</view>
				<view class="justify-content-item tn-margin-right-sm tn-text-lg tn-color-grey"
					@click="navigateToFn({ url: '/circleMixinPages/gift_user?id='+id, checkLogin: false })">
					<text class="tn-icon-right"></text>
				</view>
			</view>

			<view class="tn-tag-content tn-margin-left-sm tn-margin-right-sm tn-padding-top-sm">
				<tn-scroll-list v-if="body.giftlog.length>0">
					<view class="tn-flex ">
						<block v-for="(item, indexgift) in body.giftlog" :key="indexgift">
							<view style="width: 100px; height: 140px;background-color: #f8f8f8;"
								class=" tn-flex-1 tn-padding-sm tn-margin-xs tn-radius ">
								<view class=" tn-flex-direction-column " style="text-align: center;
		align-items: center;">
									<image class="" :src="item.image" style="width: 60px; height: 60px;">
									</image>
									<view class="tn-color-black tn-text-center">
										<text class="tn-text-ellipsis">{{item.title}}</text>
									</view>
									<view class="tn-color-black tn-text-center tn-padding-top-sm">
										<text class="tn-text-ellipsis tn-color-gray">x{{item.gift_num}}</text>
									</view>
								</view>
							</view>
						</block>
					</view>
				</tn-scroll-list>

				<tn-empty icon="/static/images/no.png" text="暂无礼物,快去互动吧!" v-else>

				</tn-empty>

			</view>
			</block>
			<view class="tn-flex tn-flex-row-between tn-margin">
			
				<tn-button@click="jubaoshow=true" shape="round" backgroundColor="tn-main-gradient-red--light"
					padding="40rpx 30rpx" fontBold>
					<text class="tn-icon-warning tn-margin-right-sm" style="font-size:38rpx;"></text>举报/屏蔽
					</tn-button>
			
					<tn-button @click="shangqiang()" shape="round"
						:backgroundColor="body.weekpush==null?'tn-main-gradient-aquablue--light':'yicaozuo'"
						padding="40rpx 30rpx" shadow fontBold>
						<text class="tn-icon-praise tn-margin-right-sm" style="font-size: 38rpx;"></text> 推荐上墙
					</tn-button>
			
			</view>
			
			
			<view class="input-box" >
				<view class="tn-flex tn-flex-row-center tn-radius tn-margin-top">
			<tn-button @tap="calltel(2)" shape="round" backgroundColor="tn-main-gradient-red--reverse"
				padding="40rpx 30rpx" fontBold style="margin-right: 10px;">
				<text class="tn-icon-tel tn-margin-right-sm" style="font-size:38rpx;"></text>
				
				<view class="tn-text-sm">视频通话({{body.vod_price}}币/分钟)</view>
			</tn-button>
			
			
					<!-- #ifdef APP-PLUS||H5 -->
					<!-- <tn-button @click="onShare" shape="round" backgroundColor="tn-main-gradient-cyan--reverse"
						padding="40rpx 30rpx" fontBold style="margin-right: 10px;">
						<text class="tn-icon-share tn-margin-right-sm" style="font-size:38rpx;"></text>介绍给朋友
					</tn-button> -->
					<!-- #endif -->
					<!-- #ifdef MP -->
					<!-- <tn-button open-type="share" shape="round" backgroundColor="tn-main-gradient-cyan--reverse"
						padding="40rpx 30rpx" fontBold style="margin-right: 10px;">
						<text class="tn-icon-share tn-margin-right-sm" style="font-size:38rpx;"></text>介绍给朋友
					</tn-button> -->
					<!-- #endif -->
					<block v-if="configInfo.talk_type==1">
						
						<tn-button v-if="body.is_reglove<0&&body.is_loveheart<1" @click="renshi()" shape="round"
							backgroundColor="tn-cool-bg-color-6" fontColor="#ffffff" padding="40rpx 30rpx" width="260rpx"
							shadow fontBold>
							 想认识TA
						</tn-button>
			
						<tn-button v-if="body.is_reglove==0" @click="msg('等待对方同意，你可以在消息里查看状态')" shape="round"
							backgroundColor="tn-cool-bg-color-6" fontColor="#ffffff" padding="40rpx 30rpx" width="260rpx"
							shadow fontBold>
							<text class="tn-icon-comment tn-margin-right-sm" style="font-size: 56rpx;"></text>等待同意
						</tn-button>
						<tn-button v-if="body.is_reglove==1||body.is_loveheart==1"
							@click="navigateToFn({ url: '/mineMixinPages/chat/talk?toid='+body.id, checkLogin: true })"
							shape="round" backgroundColor="tn-cool-bg-color-6" fontColor="#ffffff" padding="40rpx 30rpx"
							width="260rpx" shadow fontBold>
							<text class="tn-icon-comment tn-margin-right-sm" style="font-size: 56rpx;"></text>开始聊天
						</tn-button>
					</block>
					<block v-else>
						<tn-button @click="navigateToFn({ url: '/mineMixinPages/chat/talk?toid='+body.id, checkLogin: true })"
							shape="round" backgroundColor="tn-cool-bg-color-6" fontColor="#ffffff" padding="40rpx 30rpx"
							width="260rpx" shadow fontBold>
							<text class="tn-icon-comment tn-margin-right-sm" style="font-size: 56rpx;"></text>开始聊天
						</tn-button>
					</block>
				</view>
			</view>
		</view>
		

		<view class='tn-tabbar-height'></view>
		<login-fn :is-show-login="loginBoxFlag" @loginSuccessCallback="refreshFn" @close="closeGlobalLoginFn">
		</login-fn>

		<view v-if="body.is_loveheart_duiwo==1" class="tn-text-sm tn-main-gradient-purplered--light" style="position: fixed;left: auto;
    right: 10rpx;bottom: 250rpx;z-index: 19059;border-radius: 30rpx;padding: 5rpx 10rpx;">心动过我</view>

		<tn-fab right="20" bottom="300" width="100" height="100" iconSize="65" v-if="body.is_loveheart!==1"
			:backgroundColor="body.is_loveheart==0?'tn-main-gradient-purplered--light':'tn-main-gradient-purplered--single'"
			icon="like-fill" :cishu="body.loveheart_num" :showMask="true" @click="xindong(2)">
			
		</tn-fab>
		<tn-fab right="20" bottom="300" width="100" height="100" v-else
			backgroundColor="tn-main-gradient-purple--single" :showMask="true" @click="msg('双方都心动啦！')">
			<image src="../static/douxidong.png" style="width: 80rpx;height: 80rpx;" mode="aspectFill"></image>
		</tn-fab>
		<tn-fab right="20" bottom="450" width="100" height="100" iconSize="65"
			backgroundColor="tn-main-gradient-purple--reverse" icon="gift" :showMask="true" @click="opengift()">
		</tn-fab>








		<tn-modal width="80%" v-model="jubaoshow" backgroundColor="#E4E9EC" padding="30rpx 20rpx" :radius="25"
			title="举报" :showCloseBtn="false" :button="button" :maskCloseable="true" :zoom="true" :custom="true">

			<view class="custom-modal-content tn-padding-sm ">
				<view class="tn-text-left tn-color-gray" style="font-size: 14px;">
					为帮助审核人员更快速度处理，请补充违规内容等详细信息
				</view>
				<view class=" tn-border-solid ">
					<textarea maxlength="200" placeholder="请填写举报理由" v-model="jubao_body"
						placeholder-style="color:#7e7e7e" style="width:230px;font-size: 14px;"></textarea>
				</view>
				<view class="tn-text-center tn-padding-top">
					<tn-button @click="jubaopass()" shape="round" backgroundColor="tn-cool-bg-color-6"
						fontColor="#ffffff" padding="40rpx 30rpx" width="260rpx" shadow fontBold>
						提交投诉
					</tn-button>

				</view>

			</view>
		</tn-modal>


		<tn-modal width="80%" v-model="tuihuanshow" backgroundColor="#ffffff" padding="30rpx 20rpx" :radius="25"
			title="设置" :showCloseBtn="false" :maskCloseable="true" :zoom="true" :custom="true">

			<view class="custom-modal-content tn-padding-sm ">
				<view class="  tn-margin-top  ">
					<view class=" tn-flex tn-flex-row-center " style="margin-top:20rpx;">
						<view class="tn-padding-xs tn-text-bold tn-text-lg">{{configInfo.site_moneyname}}退还说明</view>
					</view>
					<view class=" tn-flex tn-flex-row-left " style="margin-top:20rpx;">
						<text
							class="tn-padding-xs">1、平台会收取{{body.jiage}}{{configInfo.site_moneyname}}作为[单次申请认识功能使用费]，从用户的{{configInfo.site_moneyname}}账户中扣除；</text>
					</view>
					<view class=" tn-flex tn-flex-row-left ">
						<text class="tn-padding-xs">2、若对方未查看申请，导致7天后系统自动拒绝，平台退还全部{{configInfo.site_moneyname}}；</text>
					</view>
					<view class=" tn-flex tn-flex-row-left ">
						<text class="tn-padding-xs">3、若对方主动拒绝，平台退还一半{{configInfo.site_moneyname}}；</text>
					</view>
					<view class=" tn-flex tn-flex-row-left ">
						<text class="tn-padding-xs">4、若申请方主动终止申请，平台退还一半{{configInfo.site_moneyname}}；</text>
					</view>
					<view class=" tn-flex tn-flex-row-left ">
						<text
							class="tn-padding-xs">5、若对方查看申请后超过7天未处理导致系统自动拒绝的，平台退还一半{{configInfo.site_moneyname}}；</text>
					</view>
				</view>


				<view class="tn-text-center tn-padding-top" @click="tuihuanshow=false,renshishow=true">
					<tn-button :fontSize="28" padding="16rpx 150rpx" backgroundColor="tn-cool-bg-color-6"
						fontColor="#ffffff" shape="round">
						知道了
					</tn-button>
				</view>

			</view>
		</tn-modal>




		<tn-popup v-model="renshishow" width="80%" height="650rpx" mode="bottom" backgroundColor="#ffffff"
			:borderRadius="30" :closeBtn="false" :maskCloseable="true">

			<view class="  ">
				<view class="tn-flex tn-flex-row-left tn-margin-top tn-padding">
					<view class="title justify-content-item">
						<tn-avatar class="" :src="body.avatar" size="lg" shape="circle">
						</tn-avatar>
					</view>

					<view class=" justify-content-item tn-margin-left  ">
						<view class="tn-flex tn-flex-row-between">
							<view class="title justify-content-item">{{body.nickname}}
								<text class="tn-icon-trophy-fill"
									style="color:rgb(85 170 0 /0.6);font-size:40rpx;margin:0 18rpx;"></text>
								<tn-tag v-if="body.is_renzheng" shape="circle" backgroundColor="tn-cool-bg-color-4"
									height="38rpx" width="120rpx">
									<text class="tn-icon-safe" style="font-size:24rpx;">已认证</text>
								</tn-tag>
							</view>
						</view>

						<view class="desc">
							<view class="zhuangtai">
								<image :src="calcImageSrc(body.zhuangtai_image)"
									style="width:60rpx;height:60rpx;margin-left: -40rpx;" mode="aspectFill">
								</image>
								<text class="tn-margin-left-sm">{{body.zhuangtai_title}}</text><text
									class="tn-icon-right"></text>
							</view>
							<tn-tag shape="circle" backgroundColor="tn-main-gradient-purple--light">
								{{body.hun}}
							</tn-tag>
						</view>
					</view>
				</view>
				<view class="tn-margin tn-bg-gray--light tn-padding" style="border-radius: 10rpx;">
					<textarea style="height: 150rpx;" maxlength="300" placeholder="申请认识并留言打动TA" v-model="rensi_body"
						placeholder-style="color:#AAAAAA"></textarea>
				</view>

				<view class="tn-text-center tn-padding-top">
					<view class="tn-padding-xs tn-color-gray tn-text-sm" @click="tuihuanshow=true,renshishow=false">
						<text class="tn-icon-help"></text>
						由平台收取，申请失败{{configInfo.site_moneyname}}会还全部或一半
					</view>

					<view class="capsule" style="width:90%;height:80rpx;">
						<tn-tag class="capsule-tag" width="70%" height="100%" :originLeft="true" padding="0"
							shape="circleLeft" backgroundColor="#5d5e7d" fontColor="#FFFFFF" :plain="false">
							<image :src="configInfo.site_moneylogo" mode="heightFix" style="height: 50rpx;"></image>
							<text class="tn-text-lg  tn-text-bold">-{{body.jiage}}{{configInfo.site_moneyname}}</text>
						</tn-tag>
						<tn-tag @click="buynum()" class="capsule-tag" width="30%" height="100%" padding="0"
							shape="circleRight" backgroundColor="tn-cool-bg-color-6" fontColor="#ffffff" :plain="false">
							<text class="tn-text-lg tn-text-bold">立即申请</text>
						</tn-tag>
					</view>
				</view>

			</view>
		</tn-popup>


		<tn-popup v-model="goumaishow" width="80%" height="400rpx" mode="bottom" backgroundColor="#ffffff"
			:borderRadius="30" :closeBtn="false" :maskCloseable="true">
			<view class="  ">
				<view class="  tn-margin-top tn-padding ">
					<view class=" tn-flex tn-flex-row-left ">
						<view class="tn-padding-xs tn-text-bold tn-text-lg">心动次数不足</view>
					</view>
					<view class="  tn-flex-row-left ">
						<view class="tn-padding-xs  tn-color-gray">
							消耗{{body.heatmoney}}{{configInfo.site_moneyname}}获得1次机会</view>
					</view>
					<view class="  tn-flex-row-left ">
						<view class="tn-padding-xs  tn-color-gray">
							你要可以前往签到免费领取
							<tn-button @click="navigateToFn({ url: '/mineMixinPages/qiandao', checkLogin: true })" size="sm"
								backgroundColor="tn-cool-bg-color-6" fontColor="#ffffff" shape="round"
								style="margin-left: 10px;">
								去签到
							</tn-button>
						</view>
					</view>
				</view>
				<view class="tn-text-center tn-padding-top">
					<view class="capsule" style="width:90%;height:80rpx;">
						<tn-tag class="capsule-tag" width="70%" height="100%" :originLeft="true" padding="0"
							shape="circleLeft" backgroundColor="#5d5e7d" fontColor="#FFFFFF" :plain="false">
							<image :src="configInfo.site_moneylogo" mode="heightFix" style="height: 50rpx;"></image>
							<text
								class="tn-text-lg  tn-text-bold">-{{body.heatmoney}}{{configInfo.site_moneyname}}</text>
						</tn-tag>
						<tn-tag @click="xindong(1)" class="capsule-tag" width="30%" height="100%" padding="0"
							shape="circleRight" backgroundColor="tn-cool-bg-color-6" fontColor="#ffffff" :plain="false">
							<text class="tn-text-lg tn-text-bold">立即心动</text>
						</tn-tag>
					</view>
				</view>

			</view>
		</tn-popup>


		<tn-popup v-model="shouhuxiu" width="80%" height="650rpx" mode="bottom" :borderRadius="30" :closeBtn="true"
			:maskCloseable="true" @close="closedPopup">

			<view class="tn-margin-top-sm">
				<view style="align-items: center;border-radius: 25px;height: 100px;
    justify-content: center;b" class="tn-flex tn-flex-row-between  tn-padding-xs tn-margin-xs">
					<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">

						<tn-avatar class="" shape="circle" :src="body.avatar" size="xl">
						</tn-avatar>
						<view class="tn-color-black tn-text-center tn-text-justify tn-padding-top-sm">
							<text class="tn-color-black ">守护 {{body.nickname}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="tn-flex tn-flex-row-around tn-margin-top-sm money-area ">
				<view
					class="justify-content-item item tn-padding-xl tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"
					v-for="(item, indexsshhud)  in body.keep_price" :key="item"
					:class="{ active:indexsshhud == shouhutype}" @click="rechargeChange(indexsshhud)">
					<view class="price">{{indexsshhud}}个月</view>
					<text class="fs-xs">{{configInfo.site_moneyname}}{{item}}</text>
				</view>

			</view>
			<view class="tn-text-center" @click="shouhuosend">
				<tn-button :shadow="true" width="60%" backgroundColor="tn-main-gradient-purple" height="80rpx"
					margin="10rpx 0">立即开通
				</tn-button>
			</view>
			<tn-modal width="80%" v-model="chongzhiis" backgroundColor="#E4E9EC" padding="30rpx 80rpx" :radius="25"
				title="抱歉.余额不足!" :button="button" :showCloseBtn="false" :maskCloseable="false" :zoom="true"
				:custom="false" >

			</tn-modal>

		</tn-popup>

		<dk-tanchuang v-model="giftianchu" width="80%" height="40%" mode="center" :borderRadius="30"
			:giftitle="giftitle" :gifcontent="gifcontent" :giftimg="giftimg" :maskCloseable="true" @close="closedPopup">
		</dk-tanchuang>

		<tn-popup v-model="popshow" width="80%" height="600rpx" mode="bottom" backgroundColor="rgba(64, 64, 64, 0.82)"
			:borderRadius="30" :closeBtn="false" :maskCloseable="true" @close="closedPopup">
			<gift-list :user_id="id"></gift-list>
		</tn-popup>
		<tn-popup v-model="liwusvgashow" width="100%" height="100%" mode="center"
			backgroundColor="rgba(255, 255, 255, 0.1)" :borderRadius="30" :closeBtn="false" :maskCloseable="true"
			@close="closedPopup">
			<l-svga ref="svga"></l-svga>
		</tn-popup>
	</view>
</template>

<script>
	import {
		host
	} from '@/siteinfo.js'
	const audioContext = uni.createInnerAudioContext()

	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue';
	import MescrollUni from '@/components/mescroll-uni/mescroll-uni.vue';
	import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
	export default {
		name: 'TemplateGroup',
		mixins: [template_page_mixin, MescrollMixin],
		components: {
			MescrollBody			
		},
		data() {
			return {
				goumaishow: false,
				rensi_body: '你好，很开心认识你',
				tagsshow: false,
				imageUrl: '',
				caijianshow: false,
				touxiang: false,
				renshishow: false,
				tuihuanshow: false,
				images: [],
				cardCur: 0,
				isplay: false,
				morendongtaishow: 0,
				list: ['个人资料', '我的动态'],
				showchongwu: false,
				//、
				//图片上传参数
				action: host + '/chat/user/up_img',
				formData: {
					apiType: 'this,ali',
					token: uni.getStorageSync('token'),
					image: null
				},
				fileList: [],
				okpiclist: '', //上传完毕的图片字符逗号隔开
				showUploadList: true,
				customBtn: false,
				autoUpload: true,
				showProgress: true,
				deleteable: true,
				customStyle: false,
				maxCount: 6,
				disabled: false,
				//
				liwusvgashow: false,
				giftimg: '',
				giftianchu: false,
				giftitle: '',
				gifcontent: '',
				//、
				button: [{
						text: '取消',
						backgroundColor: '#c1c1c1',
						fontColor: '#000000'
					},
					{
						text: '立即充值',
						backgroundColor: '#ffff00',
						fontColor: '#000000'
					}
				],
				chongzhiis: false,
				shouhutype: '3',
				shouhuxiu: false,
				isReady: false,
				popshow: false,
				valuetop: false,
				loginBoxFlag: false, // 登录框显示隐藏状态
				id: 0,
				shouhuimg: '/static/keeper.png',
				body: {
					"shengri": [],
					"nickname": '',
					"lv": 0,
					"dec": 0,
					"city": 0,
					"bg_img": '',
					"keeper": [],
					"giftlog": [],
					"tags": [],
					"giftCount": 0,
					"keeperCount": 0,

				},
				content: [],
				swiperList: [],
				////////
				jubao_body: '',
				jubaoshow: false,
				show_poster: false, //显示海报
				path: '', //生成的图片地址				
				posterObj: {
					width: '580rpx',
					height: '928rpx',
					background: '#fff',
					borderRadius: '16rpx',
					views: []
				}, //画板数据
				sharedata: [],
				myid: 0,


			}
		},
		onLoad(option) {
			uni.$off('liwuoksvga')
			uni.$off('liwuok')
			let that = this
			if (option.daren_id) {
				uni.setStorageSync('daren_id', option.daren_id)
			}
			uni.$off('setLoginBoxFlag');
			uni.$on('setLoginBoxFlag', loginBoxFlag => {
				that.loginBoxFlag = loginBoxFlag;
			});
			uni.$off('editinfo');
			uni.$on('editinfo', data => {
				this.info()
			});
			if (option.id) {
				this.id = Number(option.id)
			}

			uni.$off('liwuok');
			uni.$on('liwuok', data => {
				console.log(3333333)
				this.giftimg = data
				this.giftitle = "成功送出礼物"
				this.giftianchu = true
				this.gifcontent = ''
				//this.info()
				this.popshow = false
				setTimeout(() => {
					this.giftianchu = false
				}, 2000);
			});
			uni.$off('liwuoksvga');
			uni.$on('liwuoksvga', data => {

				this.gifcontent = ''
				this.popshow = false
				this.liwu(data)
				this.info()
			});


			this.myid = uni.getStorageSync('user_id');
			this.info()
			
			this.lookuser()
			this.dongtai()
		},

		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: this.body.nickname + '的个人主页', //分享的名称
				path: '/circleMixinPages/blogger_other?id=' + this.id + '&daren_id=' + uni.getStorageSync('user_id'),
				imageUrl: this.body.avatar
			}
		},
		//分享到朋友圈
		onShareTimeline(res) {
			return {
				title: this.body.nickname + '的个人主页',
				path: '/circleMixinPages/blogger_other?id=' + this.id + '&daren_id=' + uni.getStorageSync('user_id'),
				imageUrl: this.body.avatar
			}
		},

		onUnload() {
			if (this.isplay) {
				audioContext.stop()
				this.isplay = false
				return
			}
		},
		methods: {
			async calltel(type) {
				
				if (!uni.getStorageSync('user_id')) {
					this.loginBoxFlag = true;
					return
				}
				
				let that = this;
				let result = await that.$request({
					loading: 0,
					method: 'post',
					url: '/chat/fourtow/getChatTwoUser_home',
					data: {
						formid:uni.getStorageSync('user_id'),
						toid: that.id						
					}
				});
				if (result.statusCode == 200) {
					if (result.data.code == 200) {						
						this.calltel_pass(result.data.data,type);
				
					} else {
						uni.showModal({
							title: '提示',
							content: result.data.msg,
							confirmText: '知道了',
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									uni.navigateBack()
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
				
				
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: that.$errorMsg
					});
				}
				
			},	
			
			calltel_pass(datapass,type) {
				let that = this	
							
							console.log(datapass)
				if (!uni.getStorageSync('user_id')) {
					this.loginBoxFlag = true;
					return
				}				
				let roomid=uni.getStorageSync('user_id')+50000;				
				// #ifndef APP
				this.msg('仅APP支持，请下载APP')
				//return
				// #endif
				
				if (datapass.fromInfo.vod_ci==1) {
					this.msg('今日次数已用完')
					return
				}			
				
				if (datapass.fromInfo.money < datapass.toInfo.vod_price * 3 && type == 2) {
					this.msg('你的余额不足通话3分钟，请充值')
					return
				}
				
				
				var message = '{"data":"'+roomid+'","lei":"calluser","type":"alltype","fromid":"' + datapass.fromInfo.id + '","toid":"' +
					this.id + '","fromhead":"'+datapass.fromInfo.avatar+'","fromname":"'+datapass.fromInfo.nickname+'"}';
				this.$socket.send(message);				
				uni.navigateTo({
					url: '/mineMixinPages/chat/touser?room_id='+roomid+'&toid='+this.id+'&toname='+datapass.toInfo.nickname+'&tohead='+datapass.toInfo.avatar
				})			
			},
			async dongtai() {
				let that = this;
				let result = await that.$request({
					loading: 0,
					method: 'post',
					url: '/chat/index/getGoodslist',
					data: {
						to_id: that.id
					}
				});
				if (result.statusCode == 200) {
					if (result.data.code == 200) {
						that.content = result.data.data.data[0];
					} else {
						uni.showToast({
							icon: 'none',
							title: result.data.msg
						});
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: that.$errorMsg
					});
				}
			},
			renshi() {
				if (!uni.getStorageSync('user_id')) {
					this.loginBoxFlag = true;
					return
				}
				this.renshishow = true
			},
			shang(type) {
				if (type == 1) {
					this.id = this.body.shang_id
				} else {
					this.id = this.body.xia_id
				}
				this.info()
			},
			async buynum() {
				let that = this;
				if (!this.isLogin) {
					this.loginBoxFlag = true
					return false;
				}

				if (that.rensi_body == '') {
					this.msg('请输入申请理由')
					return
				}

				let result = await that.$request({
					loading: 0,
					method: 'post',
					url: '/chat/love/buyreglove',
					data: {
						user_id: that.id,
						type: 1,
						content: that.rensi_body
					}
				});

				if (result.statusCode == 200) {
					if (result.data.code == 200) {
						this.msg(result.data.msg)
						this.tuihuanshow = false
						this.renshishow = false
						that.body.is_reglove = 0;
					} else {
						this.tuihuanshow = false
						this.renshishow = false
						uni.showToast({
							icon: 'none',
							title: result.data.msg
						});
					}
				}
			},
			async xindong(type) {
				let that = this;
				if (!this.isLogin) {
					this.loginBoxFlag = true
					return false;
				}
				if (this.body.is_loveheart == 0) {
					this.msg('你已经发出心动啦！对方心动你后可聊天！')
					return false;
				}

				let result = await that.$request({
					loading: 0,
					method: 'post',
					url: '/chat/love/loveheart',
					data: {
						type: type,
						user_id: that.id
					}
				});

				if (result.statusCode == 200) {
					if (result.data.code == 200) {
						uni.vibrateShort({
							success: function() {
								console.log('success');
							}
						});
						this.msg(result.data.msg)
						this.info()
						that.goumaishow = false
						let message = '{"data":"我对你心动了！","sec":"0","type":"text","toid":"' + this.id + '","fromid":"' +
							this.myid + '"}';
						if (this.configInfo.isheard_talk) {
							this.save_message(message);
						}
					} else {

						if (result.data.msg == '心动次数不足') {
							this.goumaishow = true
							return
						}

						uni.showToast({
							icon: 'none',
							title: result.data.msg
						});
					}
				}
			},

			async save_message(datassd) {
				let that = this;
				this.$socket.send(datassd);
				let result = await that.$request({
					loading: 0,
					method: 'post',
					url: '/chat/chat/save_message',
					data: datassd
				});

			},

			async jubaopass() {
				let that = this;
				if (!this.isLogin) {
					this.loginBoxFlag = true
					return false;
				}

				if (that.jubao_body == '') {
					this.msg('请输入举报理由')
					return
				}

				let result = await that.$request({
					loading: 0,
					method: 'post',
					url: '/chat/user/addReport',
					data: {
						goods_id: that.id,
						type: 1,
						content: that.jubao_body
					}
				});

				if (result.statusCode == 200) {
					if (result.data.code == 200) {
						that.jubao_body = ''
						this.msg(result.data.msg)
						this.jubaoshow = false

					}
				}
			},
			onShare() {

				// #ifdef H5
				this.msg('H5请点击右上角三个点分享')
				return
				// #endif

				if (!this.configInfo.pay_yingyong_wx) {
					uni.shareWithSystem({
						summary: this.body.share_sub,
						href: this.body.share_url,
						success() {
							// 分享完成，请注意此时不一定是成功分享
						},
						fail() {
							// 分享失败
						}
					})
				}
				if (this.body.xcx_original_id) {
					uni.share({
						provider: "weixin",
						scene: "WXSceneSession",
						type: 0,
						href: this.body.share_url,
						title: this.body.share_title,
						summary: this.body.share_sub,
						imageUrl: this.body.share_img,
						miniProgram: {
							id: this.body.share_xcx_original_id,
							path: 'circlePages/blogger_other?id' + this.id,
							type: 0,
							webUrl: this.body.share_url
						},
						success: function(res) {
							console.log("success:" + JSON.stringify(res));
						},
						fail: function(err) {
							console.log("fail:" + JSON.stringify(err));
						}
					})
				} else {
					uni.share({
						provider: "weixin",
						scene: "WXSceneSession",
						type: 0,
						href: this.body.share_url,
						title: this.body.share_title,
						summary: this.body.share_sub,
						imageUrl: this.body.share_img,
						success: function(res) {
							console.log("success:" + JSON.stringify(res));
						},
						fail: function(err) {
							console.log("fail:" + JSON.stringify(err));
						}
					})
				}


			},

			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
			labelBtn(name, index) {
				this.body.tags[index].checked = !this.body.tags[index].checked
				this.tagsshow = true
			},
			huadong(e) {
				console.log(e)
				this.morendongtaishow = e.index
			},

			closedPopup() {
				this.popshow = false
			},
			async guanzhu(id) {

				if (!this.isLogin) {
					this.loginBoxFlag = true
					return false;
				}
				uni.showLoading({
					title: '正在关注'
				})
				let result = await this.flowUser(id)
				this.body.is_flow = result.is_follow
				uni.hideLoading()
				this.msg(result.msg)
			},


			async shangqiang() {
				if (!this.isLogin) {
					this.loginBoxFlag = true
					return false;
				}
				let that = this;
				let result = await that.$request({
					loading: 0,
					method: 'post',
					url: '/chat/love/pushweek',
					data: {
						user_id: this.body.id
					}
				});
				if (result.statusCode == 200) {
					if (result.data.code == 200) {
						this.msg('推荐上墙成功，下周还可以继续推荐哦')
						that.body.weekpush = this.id;
					} else {
						uni.showToast({
							icon: 'none',
							title: result.data.msg
						});
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: that.$errorMsg
					});
				}
			},
			async lookuser() {
				let that = this;
				let result = await that.$request({
					loading: 0,
					method: 'post',
					url: '/chat/index/getlookuser',
					data: {
						user_id: this.id
					}
				});
			},
			async info() {
				
				let that = this;
				let result = await that.$request({
					loading: 1,
					method: 'post',
					url: '/chat/index/GetUserinfo',
					data: {
						user_id: this.id
					}
				});


				if (result.statusCode == 200) {
					if (result.data.code == 200) {
						uni.hideLoading()
						that.body = result.data.data;
						that.images = that.body.images


						let imgslist = []
						that.body.images.forEach(item => {
							imgslist.push({
								'url': item
							})
						})
						that.fileList = imgslist
						that.swiperList = result.data.data.swiperList;
						uni.setNavigationBarTitle({
							title: that.body.nickname
						});
						if (that.body.chongwu) {
							that.showchongwu = true
						}

					} else {
						uni.showToast({
							icon: 'none',
							title: result.data.msg
						});
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: that.$errorMsg
					});
				}


			},


			fuzhi(wx) {
				uni.setClipboardData({
					data: wx,
					complete() {
						uni.showToast({
							title: "已复制到剪贴板"
						})
					}
				})
			},
			refreshFn() {
				this.info()
			},
			kantu(i, tulist) {
				uni.previewImage({
					current: i,
					urls: tulist
				});
			},

			bofang(vocurl) {
				if (this.isplay) {
					audioContext.stop()
					this.isplay = false
					return
				}
				this.isplay = !this.isplay;
				let that = this
				audioContext.src = vocurl
				audioContext.play()
				audioContext.onPlay(() => {})
				audioContext.onEnded(() => {
					this.isplay = false
				})
				audioContext.onError(() => {
					this.isplay = false
					that.msg('不支持播放该音频格式')
				})
			},

			shuhouta() {
				if (this.id == 0) {
					this.msg('自己不能守护自己')
					return
				}
				this.shouhuxiu = true
			},

			async shouhuosend() {
				let that = this;
				if (!uni.getStorageSync('token')) {
					this.loginBoxFlag = true
					this.shouhuxiu = false
					return false;
				}
				this.giftimg = ''


				let result = await that.$request({
					loading: 0,
					method: 'post',
					url: '/chat/gift/doKeeper',
					data: {
						user_id: this.id,
						type: this.shouhutype
					}
				});

				if (result.statusCode == 200) {
					if (result.data.code == 200) {

						if (result.data.msg == '余额不足') {
							that.chongzhiis = true
						}
						if (result.data.msg == '守护成功') {
							that.shouhuxiu = false
							that.gifcontent = "成功守护TA" + this.shouhutype + "个月"
							that.giftitle = "恭喜你"
							that.giftianchu = true
							this.info()
						}


					} else {
						uni.showToast({
							icon: 'none',
							title: result.data.msg
						});
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: result.data.data
					});
				}
			},
			rechargeChange(item) {
				this.shouhutype = item
			},

			opengift() {
				if (this.id == 0) {
					this.msg('自己不能送自己')
					return
				}
				this.popshow = true
			},
			liwu(url) {
				this.liwusvgashow = true
				setTimeout(() => {
					this.bofangsvga(url)
				}, 500);

				setTimeout(() => {
					this.liwusvgashow = false
				}, 5000);
			},

			bofangsvga(url) {

				this.$refs.svga.render(async (parser, player) => {
					const videoItem = await parser.load(url);
					await player.setVideoItem(videoItem);
					// 设置当前动画的循环次数，0代表无限循环 默认 0
					player.loops = 1
					player.clearsAfterStop = true
					// 开始播放动画，reverse = true 时则反向播放。
					player.startAnimation()

					player.onPercentage((percentage) => {
						// 由于有动画未完成时需要显示其他效果的需求，所以监听动画播放进度
						// svga动画播放进度大于 70% 时，显示卡牌
						if (percentage * 100 > 70) {
							//this.svgaShow = false
						}
					})
					// 监听动画完成
					player.onFinished(() => {
						console.log('播放完毕')
						player.clear()
						this.liwusvgashow = false
					})
				})
			},


		}
	}
</script>

<style lang="scss" scoped>
	.meng {}




	.template-mine {
		max-height: 100vh;
	}

	.tn-tabbar-height {
		min-height: 120rpx;
		height: calc(140rpx + env(safe-area-inset-bottom) / 2);
	}

	/* 自定义导航栏内容 start */
	.custom-nav {
		height: 100%;

		&__back {
			margin: auto 5rpx;
			font-size: 40rpx;
			margin-right: 10rpx;
			flex-basis: 5%;
			width: 100rpx;
			position: absolute;
		}
	}

	/* 自定义导航栏内容 end */

	/* 顶部背景图 start */
	.top-backgroup {


		height: 550rpx;
		z-index: -1;

		.backgroud-image {
			width: 100%;
			height: 250rpx;
			// z-index: -1;
		}
	}

	/* 顶部背景图 end */

	/* 标题 start */
	.nav_title {
		-webkit-background-clip: text;
		color: #0E122A;


		&--wrap {
			position: relative;
			display: flex;
			height: 120rpx;
			align-items: center;
			justify-content: center;
			font-weight: bold;

			background-size: cover;
		}
	}

	/* 标题 end */

	/* 用户头像 start */
	.logo-image {
		width: 150rpx;
		height: 150rpx;
		position: relative;
	}

	.logo-pic {
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		border: 8rpx solid rgba(255, 255, 255, 0.05);
		box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
		border-radius: 50%;
		overflow: hidden;
		// background-color: #FFFFFF;
	}

	/* 页面 start*/
	.about-shadow {
		border-radius: 15rpx;
		box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
	}

	.about {

		&__wrap {
			position: relative;
			z-index: 1;
			margin: 20rpx 30rpx;
			margin-top: -230rpx;
		}
	}

	/* 页面 end*/

	/* 图标容器12 start */
	.tn-three {
		position: absolute;
		top: 50%;
		right: 50%;
		bottom: 50%;
		left: 50%;
		transform: translate(-38rpx, -16rpx) rotateX(30deg) rotateY(20deg) rotateZ(-30deg);
		text-shadow: -1rpx 2rpx 0 #f0f0f0, -2rpx 4rpx 0 #f0f0f0, -10rpx 20rpx 30rpx rgba(0, 0, 0, 0.2);
	}

	.icon20 {
		&__item {
			width: 30%;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			padding: 30rpx;
			margin: 20rpx 10rpx;
			transform: scale(1);
			transition: transform 0.3s linear;
			transform-origin: center center;

			&--icon {
				width: 100rpx;
				height: 100rpx;
				font-size: 60rpx;
				border-radius: 50%;
				margin-bottom: 18rpx;
				position: relative;
				z-index: 1;

				&::after {
					content: " ";
					position: absolute;
					z-index: -1;
					width: 100%;
					height: 100%;
					left: 0;
					bottom: 0;
					border-radius: inherit;
					opacity: 1;
					transform: scale(1, 1);
					background-size: 100% 100%;
					background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg.png);
				}
			}
		}
	}

	/* 图标容器12 start */
	.icon12 {
		&__item {
			width: 30%;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			padding: 30rpx;
			margin: 20rpx 10rpx;
			transform: scale(1);
			transition: transform 0.3s linear;
			transform-origin: center center;

			&--icon {
				width: 15rpx;
				height: 15rpx;
				font-size: 50rpx;
				border-radius: 50%;
				margin-bottom: 38rpx;
				position: relative;
				z-index: 1;

				&::after {
					content: " ";
					position: absolute;
					z-index: -1;
					width: 100%;
					height: 100%;
					left: 0;
					bottom: 0;
					border-radius: inherit;
					opacity: 1;
					transform: scale(1, 1);
					background-size: 100% 100%;

				}
			}
		}
	}

	/* 标签内容 start*/
	.tn-tag-content {
		&__item {
			display: inline-block;
			line-height: 45rpx;
			padding: 10rpx 30rpx;
			margin: 20rpx 20rpx 5rpx 0rpx;

			&--prefix {
				padding-right: 10rpx;
			}
		}
	}

	/* 图标容器1 start */
	.icon1 {
		&__item {
			// width: 30%;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			padding: 30rpx;
			margin: 20rpx 10rpx;
			transform: scale(1);
			transition: transform 0.3s linear;
			transform-origin: center center;

			&--icon {
				width: 40rpx;
				height: 40rpx;
				font-size: 28rpx;
				border-radius: 50%;
				position: relative;
				z-index: 1;

				&::after {
					content: " ";
					position: absolute;
					z-index: -1;
					width: 100%;
					height: 100%;
					left: 0;
					bottom: 0;
					border-radius: inherit;
					opacity: 1;
					transform: scale(1, 1);
					background-size: 100% 100%;
					background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg.png);
				}
			}
		}
	}

	/* 图标容器1 end */

	/* 大嘴鸟*/
	.dong {
		z-index: 9999;
		position: fixed;
		top: -40px;
		right: -80px;
		transform: scale(0.24);
		-webkit-transform: scale(0.24);
		-moz-transform: scale(0.24);

	}

	.monster {
		transform: rotate(-50deg);
		-ms-transform: rotate(-50deg);
		/* IE 9 */
		-moz-transform: rotate(-50deg);
		/* Firefox */
		-webkit-transform: rotate(-50deg);
		/* Safari 和 Chrome */
		-o-transform: rotate(-50deg);
		/* Opera */
		display: flex;
		justify-content: center;
		position: relative;
		width: 170px;
		height: 400px;
		border-top-left-radius: 200px;
		border-top-right-radius: 200px;
		background-color: #3C47D7;
		box-shadow: 20px 20px 60px #4650E5;
	}

	.monster__face {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		position: absolute;
		top: 14%;
		width: 75%;
		height: 160px;
	}

	.monster__noses {
		top: 50%;
		display: flex;
		justify-content: space-between;
		width: 28%;
		height: auto;
		margin-bottom: 10px;
	}

	.monster__nose {
		width: 8px;
		height: 12px;
		border-radius: 20px;
		background: rgba(0, 0, 0, 0.5);
		box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.1);
	}

	.monster__mouth {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		width: 100%;
		height: 0%;
		overflow: hidden;
		border: 25px solid #FFC333;
		border-radius: 100px;
		background-color: #810332;
		animation: mouth 1.75s infinite;
		box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.2);
		box-sizing: border-box;
	}

	.monster__mouth::before {
		content: '';
		position: absolute;
		width: 150px;
		height: 80px;
		border-radius: 100px;
		background-color: #400018;
	}

	.monster__mouth::after {
		content: '';
		position: absolute;
		bottom: -80px;
		width: 160px;
		height: 80px;
		border-top-left-radius: 50%;
		border-top-right-radius: 50%;
		background-color: #DC1B50;
		animation: tongue 1.75s infinite;
	}

	.monster__top {
		position: absolute;
		top: -30px;
		width: 170px;
		height: 30px;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
		background-color: #ffffff;
		z-index: 100;
		animation: t 1.75s infinite;
	}

	.monster__bottom {
		position: absolute;
		bottom: 0;
		width: 100px;
		height: 30px;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		background-color: #ffffff;
		z-index: 100;
		animation: b 1.75s infinite;
	}


	.avatar-eye {
		position: absolute;
		top: -10%;
		width: 65px;
		height: 65px;
		background: linear-gradient(105deg, white, #cb87f4);
		border-radius: 100%;
		box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.2);
		margin: 3px;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}


	.avatar-eye--green {
		background: linear-gradient(to bottom, #fdfdfd, #c3efea);
	}

	.avatar-eye--violet {
		background: linear-gradient(to bottom, #fdfdfd, #e6d6f6);
	}


	.eye--left {
		left: 10%;
	}

	.eye--right {
		left: 85%;
	}

	.eye--center {
		left: 45%;
		top: 10%;
	}

	.avatar-eye-pupil {
		position: absolute;
		width: 55%;
		height: 55%;
		left: 50%;
		top: 25%;
		-webkit-transform: translate(-50%);
		transform: translate(-50%);
		z-index: 100;
		border-radius: 100%;
	}


	.pupil--green {
		background: linear-gradient(135deg, rgba(188, 248, 177, 0.7), #2fa38c 75%);
	}

	.pupil--pink {
		background: linear-gradient(135deg, #f1a183, #8535cd);
	}


	.avatar-eye-pupil-blackThing {
		position: absolute;
		width: 55%;
		height: 55%;
		left: 50%;
		top: 25%;
		background: #2c2f32;
		-webkit-transform: translate(-50%);
		transform: translate(-50%);
		border-radius: 100%;
		box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
	}

	.avatar-eye-pupil-lightReflection {
		position: absolute;
		width: 7px;
		height: 7px;
		left: 25%;
		top: 10%;
		background: #ebebeb;
		-webkit-transform: translate(-50%);
		transform: translate(-50%);
		border-radius: 100%;
		box-shadow: 10px 10px 10px rgba(255, 255, 255, 0.2);
	}


	.input-box {
		
		min-height: 100upx;
		padding: 0 15px;
		position: fixed;
		z-index: 120;
		bottom: 30rpx;
	}

	.money-area {
		margin-top: 30rpx;
		margin-bottom: 20rpx;

		.item {
			height: 150rpx;
			background: #f5f5f5;
			border-radius: 14rpx;

			.price {
				color: #333;
				margin-bottom: 10rpx;
			}

			text {
				color: #9a9a9a;
			}

			&:nth-child(2) {
				margin-left: 20rpx;
				margin-right: 20rpx;
			}
		}

		.active {
			background: #5F4FD9;
			color: #fff;

			.price,
			text {
				color: #fff !important;
			}
		}
	}

	/* 轮播视觉差 start */
	.card-swiper {
		height: 950rpx !important;
	}

	.card-swiper swiper-item {
		width: 750rpx !important;
		left: 0rpx;
		box-sizing: border-box;
		padding: 0rpx 26rpx;
		overflow: initial;
	}

	.card-swiper swiper-item .swiper-item {
		width: 100%;
		display: block;
		height: 100%;
		transform: scale(1);
		transition: all 0.2s ease-in 0s;
		overflow: hidden;
	}

	.card-swiper swiper-item.cur .swiper-item {
		transform: none;
		transition: all 0.2s ease-in 0s;
	}

	.image-banner {
		border-radius: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.image-banner image {
		width: 100%;
		height: 100%;
	}

	/* 轮播指示点 start*/
	.indication {
		z-index: 1;
		width: 100%;
		height: 36rpx;
		position: absolute;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.spot {
		background-color: rgb(122, 109, 230);
		opacity: 0.5;
		width: 10rpx;
		height: 10rpx;
		border-radius: 20rpx;
		top: -60rpx;
		margin: 0 8rpx !important;
		position: relative;
	}

	.spot.active {
		opacity: 1;
		width: 30rpx;
		background-color: rgb(122, 109, 230);
	}

	/* 间隔线 start*/
	.tn-strip-bottom {
		width: 100%;
		border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
	}

	.share {
		width: 110rpx;
		height: 110rpx;
		border-radius: 50%;
		position: absolute;
		top: 50%;
		right: 29rpx;

		#shareBtn {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			opacity: 0;
		}
	}

	.bottom_in {
		color: #ffffff;
		border: 0px solid #353535;
		display: initial;
		margin-left: 0px;
		margin-right: 0px;
		padding-left: 0px;
		padding-right: 0px;
		width: 30px;

	}

	.tantan-slide-box-info {
		padding: 0 32rpx;
		color: #2c2c2c;
	}

	.tantan-slide-box-info .title {
		font-size: 46rpx;
		line-height: 1.2;

	}

	.tantan-slide-box-info .desc {
		font-size: 24rpx;
		line-height: 1.2;
		margin-top: 30rpx;

	}

	.tantan-slide-box-info .tags {
		margin-top: 24rpx;
	}

	.tantan-slide-box-info .tag {
		height: 48rpx;
		font-size: 24rpx;
		padding: 0 16rpx;
		line-height: 48rpx;
		background-color: rgba(255, 255, 255, 0.3);
		border-radius: 10rpx;
	}

	.erge {
		height: 100px;
	}

	.sange {
		height: 200px;
	}
</style>